﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="todoApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Content/js/angular1.4.8.js"></script>
    <script src="todo.js"></script>

    <link href="todo.css" rel="stylesheet" />
</head>
<body>
    <h2>
        ToDo
    </h2>
    <div ng-controller="TodoListController as todoList">
        <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
        [<a href="" ng-click="todoList.archive()">archive</a>]
        <ul class="unstyled">
            <li ng-repeat="todo in todoList.todos">
                <input type="checkbox"  ng-model="todo.done"  />
                <span class="done-{{ todo.done}}">{{todo.text}}</span>
            </li>
        </ul>
        <form ng-submit="todoList.addTodo()">
            <input type="text"  ng-model="todoList.todoText" size="30" placeholder="add new todo here"/>
            <input  class="btn-primary" type="submit"  value="add"/>
        </form>
    </div>
</body>
</html>
